<!--
 * @Description: Trace工具
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-06 08:09:49
 * @LastEditTime: 2021-11-11 16:28:50
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content" style="padding: 0">
    <el-form :inline="true" ref="form" :model="form" label-width="80px">
      <el-form-item label="源IP" prop="source">
        <el-select
          v-model="form.source"
          clearable
          filterable
          :disabled="spinShow"
          ref="sourceIP"
          @change="changePort"
        >
          <template v-for="(item, index) in protIps">
            <!-- 过滤空IP -->
            <template v-if="item['IP'] !== null">
              <!-- 过滤物理口 -->
              <template v-if="item['name'].indexOf('gei') > -1">
                <el-option
                  :key="index"
                  :value="item['id']"
                  :label="item['IP']"
                >端口{{item.name.substring(item.name.indexOf('/') + 1, item.name.length)}} - {{ item['IP'] }}-{{item.status ? 'DOWN' : 'UP'}}</el-option>
              </template>
              <!-- 过滤隧道口 -->
              <template v-if="item['name'].indexOf('tunnel') > -1">
                <el-option
                  :key="index"
                  :value="item['id']"
                  :label="item['IP']"
                >隧道{{item.name.substring(item.name.indexOf('l') + 1, item.name.length)}} - {{ item['IP'] }}-{{item.operStatus ? 'DOWN' : 'UP'}}</el-option>
              </template>
              <!-- 过滤4G口 -->
              <template v-if="item['name'].indexOf('cellular') > -1">
                <el-option
                  :key="index"
                  :value="item['id']"
                  :label="item['IP']"
                >4G/{{item.name.substring(item.name.indexOf('/') + 1, item.name.length)}} - {{ item['IP'] }}-{{item.operStatus ? 'DOWN' : 'UP'}}</el-option>
              </template>
            </template>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="VRF名称" key="vrf" prop="vrf" v-if=" form.vrf ">
        <el-input type="text" v-model.trim="form.vrf" disabled />
      </el-form-item>
      <el-form-item
        label="目标IP"
        prop="dest"
        :rules="{ required: true, message: '请输入目标IP', trigger: 'blur' }"
      >
        <el-input
          type="text"
          v-model.trim="form.dest"
          placeholder="请输入IP地址"
          clearable
          :disabled="spinShow"
        />
      </el-form-item>
      <el-form-item
        label="MAXTTL"
        key="count"
        prop="count"
        :rules="{
          type: 'number',
          required: true,
          message: '范围：1-30次',
          trigger: 'change',
        }"
      >
        <el-input-number :max="30" :min="1" v-model.trim="form.count" :disabled="spinShow"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSubmit" type="primary" :disabled="spinShow">确认</el-button>
      </el-form-item>
    </el-form>
    <div class="trace-result">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>下一跳</th>
            <th>出接口</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in traceRes" :key="index">
            <td>{{item['hop-index']}}</td>
            <td>{{item['hop-address']}}</td>
            <td>{{item['path-out-if'] ? item['path-out-if'].toUpperCase() : item['path-out-if']}}</td>
            <td>{{item['hop-status'].toUpperCase()}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: ['ne'],
  data () {
    return {
      // 端口IP
      protIps: [],
      // 表单参数
      form: {
        source: null,
        dest: '',
        count: 1,
        vrf: null
      },
      spinShow: false,
      traceRes: []
    };
  },
  // 销毁
  beforeDestroy () {
    let _this = this;
    // 执行销毁
    _this.$ws.unregisterDgQueueListener(this.dealStart);
  },
  // 加载DOM后执行
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      // 获取网元下的端口IP
      _this.getProtIp();
      // 订阅Trace消息
      _this.$ws.registerDgQueueListener('trace.command.message.get', _this.dealStart);
    });
  },
  methods: {
    // 处理结果推送
    dealStart (data) {
      let _this = this;
      if (data && data.payload) {
        let result = data.payload.hops;
        _this.traceRes = result;
        if (result.length > 0) {
          if (result.length === _this.form.count || result.length === 30 || result[result.length - 1]['hop-address'] === _this.form.dest) {
            _this.spinShow = false;
            _this.$message.success('执行完成！');
          }
        }
      }
    },
    // 获取端口IP
    getProtIp () {
      let _this = this;
      let params = {
        commandCode: 'statics.ports',
        paras: {
          isWAN: false,
          status: 0
        }
      };
      _this.$http.post({
        url: '/api/resource/nemng/command/' + _this.ne.id,
        data: params
      }).then((res) => {
        if (res.length > 0) {
          res.map((item, index) => {
            item.id = index + 1;
          });
        }
        _this.protIps = res;
      });
    },
    // 提交Trace
    handleSubmit () {
      let _this = this;
      _this.$refs['form'].validate((valid) => {
        if (valid) {
          let params = {
            neId: _this.ne.id,
            sourceIp: _this.form.source,
            dstIp: _this.form.dest,
            count: _this.form.count,
            serialNum: _this.$store.state.user.user.info.id
          };
          let pars = {
            commandCode: 'trace.set',
            paras: {
              sourceIp: _this.form.source,
              dstIp: _this.form.dest,
              count: _this.form.count,
              serialNum: _this.$store.state.user.user.info.id
            }
          };
          for (let i = 0; i < _this.protIps.length; i++) {
            if (_this.protIps[i]['IP'] === params.sourceIp) {
              // params.vrf = _this.protIps[i]['vrf'];
              // pars.paras.vrf = _this.protIps[i]['vrf'];
              params.vrf = _this.form.vrf;
              pars.paras.vrf = _this.form.vrf;
            }
          }
          _this.$http.post({
            url: '/api/resource/nemng/command/' + _this.ne.id,
            data: pars
          }).then((res) => {
            if (res.serialNum === _this.$store.state.user.user.info.id) {
              _this.$http.post({
                url: '/api/sdwan/ne/trace',
                data: params
              }).then((res) => {
                let { status } = res;
                if (status === '0') {
                  _this.spinShow = true;
                  _this.$message.info('已发送请求，请耐心等待！');
                } else {
                  _this.spinShow = false;
                }
              }).catch(err => {
                _this.spinShow = false;
              });
            } else {
              _this.$message.error(res.message);
            }
          });
        } else {
          _this.spinShow = false;
          _this.$message.error('请检查必填项！');
        }
      });
    },
    // 选择端口 过滤Vrf
    changePort (val) {
      let _this = this;
      if (val) {
        for (let i = 0; i < _this.protIps.length; i++) {
          if (_this.protIps[i].id && _this.protIps[i].id === val) {
            _this.form.vrf = _this.protIps[i].vrf;
            _this.form.source = _this.protIps[i].IP;
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .trace-result {
    width: 100%;
    overflow: auto;
    margin-bottom: 10px;
    table {
      width: 100%;
      th {
        line-height: 23px;
        padding: 10px;
        background: rgb(248, 248, 249);
        color: rgb(102, 102, 102);
        border: 1px solid #ebeef5;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
      }
      th:first-child {
        width: 100px;
        min-width: 100px;
      }
      th:nth-child(2) {
        min-width: 150px;
      }
      th:nth-child(3) {
        min-width: 150px;
      }
      th:last-child {
        width: 100px;
        min-width: 100px;
      }
      td {
        line-height: 23px;
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        border: 1px solid #ebeef5;
        text-align: center;
      }
    }
  }
}
@media only screen and (max-width: $device-ipad) {
  table {
    width: 500px;
    overflow-x: auto;
  }
}
</style>